<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Beauty PTT</title>
<style>
body {
	margin: 0;
	padding: 0;
	background: #EEE;
	font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
	overflow: hidden;
	margin: 10px;
}
.box {
	float: left;
	position: relative;
	width: 20%;
	padding-bottom: 20%;
}
.boxInner {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
}
.boxInner img {
	width: 100%;
}
.boxInner .titleBox {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: -50px;
	background: #000;
	background: rgba(0, 0, 0, 0.5);
	color: #FFF;
	padding: 10px;
	text-align: center;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
	margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
	/* Smartphone view: 1 tile */
	.box {
		width: 100%;
		padding-bottom: 100%;
	}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
	/* Tablet view: 2 tiles */
	.box {
		width: 50%;
		padding-bottom: 50%;
	}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
	/* Small desktop / ipad view: 3 tiles */
	.box {
		width: 33.3%;
		padding-bottom: 33.3%;
	}
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
	/* Medium desktop: 4 tiles */
	.box {
		width: 25%;
		padding-bottom: 25%;
	}
}
</style>
</head>
<body>
<div class="wrap">

	<!-- Define all of the tiles: -->
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" />
			<div class="titleBox">Butterfly</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
			<div class="titleBox">An old greenhouse</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
			<div class="titleBox">Purple wildflowers</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
			<div class="titleBox">A birdfeeder</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
			<div class="titleBox">Crocus close-up</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
			<div class="titleBox">The garden shop</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
			<div class="titleBox">Spring daffodils</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
			<div class="titleBox">Iris along the path</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
			<div class="titleBox">The garden blueprint</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
			<div class="titleBox">The patio</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
			<div class="titleBox">Bumble bee collecting nectar</div>
		</div>
	</div>
	<div class="box">
		<div class="boxInner">
			<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
			<div class="titleBox">Winding garden path</div>
		</div>
	</div>

</div>
{% for article in articles %}
	{{ article.title }}
	<div class="wrap">
	{% for photo in article.photos %}
		<div class="box">
			<div class="boxInner">
				<img src="{{ photo.image_src }}" />
				<div class="titleBox"></div>
			</div>
		</div>
	{% endfor %}
	</div>
{% endfor %}
</body>
</html>
